<template>
	<view class="subleturer">
		<view class="">
			<u-navbar
				title="乐推学院"
				:back-icon-size="28"
				back-icon-color="#000000"
				:title-size="28"
				:border-bottom="false"
				:back-text-style="{ color: '#000000', fontSize: '26rpx' }"
				title-color="#000000"
				:custom-back="goback"
				:background="background"
			></u-navbar>
			<view class="lt_card">
				<u-search
					placeholder="搜索讲师丶课程"
					v-model="search"
					:input-style="{ height: '52rpx' }"
					:action-style="searchsty"
					@search="getleturerlist"
					@custom="getleturerlist"
				></u-search>
				<view class="lecturer_ul">
					<block v-for="(item, index) in leturerList" :key="index">
						<view class="lecturer_li u-flex u-row-between" @click="goinfo(item)">
							<view class="imgbox u-m-r-24">
								<image class="leturerimg" :src="item.img" mode=""></image>
								<view class="tags">金牌讲师</view>
							</view>
							<view class="leturer_text u-flex-1">
								<view class="le_top u-flex u-row-start">
									<view class="approve">官方认证</view>
									<view class="le_name">{{ item.name }}</view>
								</view>
								<view class="le_two">{{ item.desc }}</view>
								<view class="le_three">支持全国</view>
								<view class="le_price">￥{{ item.price }}</view>
							</view>
						</view>
					</block>
				</view>
			</view>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
export default {
	name: 'haha',
	data() {
		return {
			searchsty: {
				width: '118rpx',
				height: '54rpx',
				lineHeight: '54rpx',
				backgroundColor: '#FFDB28',
				borderRadius: '60rpx',
				color: '#ffffff'
			},
			leturerList: [
				{
					desc: '讲师描述',
					id: 3,
					img: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1610542142,718703573&fm=26&gp=0.jpg',
					name: '讲师26',
					price: '5.00'
				}
			],

			search: '',
			background: {
				background: '#ffffff'
			}
		};
	},
	//实例创建完成后被立即调用
	created() {},
	onLoad(option) {
		console.log(option.search);
		this.search = option.search;
	},
	//挂载开始之前被调用
	beforeMount() {},
	//初次渲染完成
	onReady() {
		this.getleturerlist();
	},
	//全局只触发一次
	onLaunch() {},
	//从后台进入前台
	onShow() {},
	//前台进入后台
	onHide() {},
	methods: {
		dosearch() {
			console.log(this.search);
		},
		getleturerlist(search) {
			this.$u.api
				.getleturerlist({
					page: 1,
					pagesize: 999,
					search: search == undefined ? '' : search //模糊查询
					// status:1,//status
				})
				.then(res => {
					console.log(res);
					if (res.code == 200) {
						this.leturerList = res.data.data;
					}
				})
				.catch(err => {
					console.log(err);
				});
		},
		goinfo(item) {
			console.log(item);
			uni.navigateTo({
				url: '/pages/college/leturse/leturerinfo?info=' + encodeURIComponent(JSON.stringify(item))
			});
		},
		goback() {
			uni.navigateBack({
				delta: 1,
				animationType: 'pop-out',
				animationDuration: 200
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.subleturer {
	.lt_card::v-deep {
		padding: 0 40rpx 40rpx 40rpx;
		.uni-input-placeholder {
			left: 0rpx;
		}
		.uni-input-input {
			text-indent: 0rpx;
		}
		.lecturer_ul {
			margin-top: 32rpx;
			.lecturer_li {
				margin-bottom: 24rpx;
				.imgbox {
					width: 376rpx;
					height: 204rpx;
					position: relative;
					border-radius: 12rpx;
					overflow: hidden;
					.leturerimg {
						width: 376rpx;
						height: 204rpx;
					}
					.tags {
						position: absolute;
						bottom: 0;
						left: 0;
						width: 148rpx;
						height: 44rpx;
						line-height: 44rpx;
						border-radius: 0px 0px 0px 12rpx;
						background-color: #fbd101;
						color: rgb(255, 255, 255);
						font-size: 28rpx;
						text-align: center;
						font-family: Arial;
						// border: 2rpx solid rgb(255, 255, 255);
					}
				}
				.leturer_text {
					.le_top {
						margin-bottom: 14rpx;
						.approve {
							background-color: #ff452d;
							color: #ffffff;
							width: 112rpx;
							height: 40rpx;
							line-height: 40rpx;
							border-radius: 16rpx;
							font-size: 24rpx;
							text-align: center;
							font-family: Arial;
							margin-right: 28rpx;
						}
						.le_name {
							font-size: 28rpx;
							font-weight: 600;
						}
					}
					.le_two {
						font-size: 28rpx;
						font-weight: 600;
						margin-bottom: 20rpx;
					}
					.le_three {
						width: 120rpx;
						height: 30rpx;
						line-height: 30rpx;
						text-align: center;
						background-color: #f2f2f2;
						font-size: 24rpx;
						color: rgb(120, 120, 130);
						border-radius: 12rpx;
						margin-bottom: 16rpx;
					}
					.le_price {
						width: 138rpx;
						height: 40rpx;
						color: #fbd101;
					}
				}
			}
		}
	}
}
</style>
